<!-- 综合预报 -->
<script setup>
import { onMounted, nextTick, ref, reactive, watch, computed, watchEffect } from 'vue'
import windicon from "../../assets/img/wave-no.png";
import waveicon from "../../assets/img/wave-no.png";
import { getForecast } from '../../network/net.js'
import { addHours } from '../../utils/cTime.js'
import iconClose from '../../assets/img/icon-关闭.png'
import { activeMenu } from '../../stores/chun.js'
import { bmName } from '../../stores/chun.js'; 
import { useDraggable } from "@vueuse/core";

// let bm = sessionStorage.getItem("bm");
// let bmInfo = sessionStorage.getItem("bmInfo");
const el = ref(null)

// `style` will be a helper computed for `left: ?px; top: ?px;`
const { x, y, style } = useDraggable(el, {
  initialValue: { x: 600, y: 140 },
})
// bm = ref(bm);
// bmInfo = ref(JSON.parse(bmInfo));
let token = sessionStorage.getItem('token')
let res = {}
let arr = ref([])
const forecastData = ref([])
const replaceMap = {
    'NE': '东北',
    'NW': '西北',
    'SE': '东南',
    'SW': '西南',
    'N': '北',
    'S': '南',
    'E': '东',
    'W': '西',
    // '-': '到',
    '→': '转',
    '↑': '增大到',
    '↓': '减小到',
    // '▽': '阵风',
}
// watch(
//     bm, () => {
//         console.log(bm.value);
        
//     })
const replaceStr = (str, dw) => {
    if (!str) {
        return ''
    }
    // 获取str中 - 的所有位置
    let arr = []
    for (let i = 0; i < str.length; i++) {
        if (str[i] == '-') {
            arr.push(i)
        }
    }
    // arr倒叙
    arr = arr.reverse()
    if (dw == '级') {
        // 正则匹配4▽5-6这类的字符串
        str = str.replace(/(\d+)(▽)(\d+)(-)(\d+)/g, '$1级阵风$3到$5级')
        // 正则匹配3-4▽5这类的字符串
        str = str.replace(/(\d+)(-)(\d+)(▽)(\d+)/g, '$1到$3级阵风$5级')
        // 正则匹配4▽5这类的字符串
        str = str.replace(/(\d+)(▽)(\d+)/g, '$1级阵风$3级')
        // 正则匹配4-5这类的字符串
        str = str.replace(/(\d+)(-)(\d+)/g, '$1到$3级')
    }

    if (dw == '米') {
        // 正则匹配0.3-0.6这类的字符串
        str = str.replace(/(\d+)(\.)(\d+)(-)(\d+)(\.)(\d+)/g, '$1.$3到$5.$7米')
    }

    let newStr = str
    for (let key in replaceMap) {
        newStr = newStr.replace(new RegExp(key, 'g'), replaceMap[key])
    }
    return newStr
}
onMounted(() => {
    getForecast(token, { departmentName: bmName.value }).then(res => {
        if (res.data.code != 500&&res.data.data.length>0) {
            
            let resData = res.data.data;
            let startTime = new Date(resData[0].publishdate)
            
            forecastData.value = [];
            resData.sort((a, b) => a.period - b.period)

            resData.forEach(item => {
                let areaName = item.areaName
                let isKey = forecastData.value[areaName]
                if (!isKey) forecastData.value[areaName] = [];
                forecastData.value[areaName].push({
                    seaAreaName: areaName,
                    date: "",
                    wheather: item.weathercontent,
                    fog: item.fog,
                    qw: item.temp,
                    hour: item.period,
                    windSpeed: replaceStr(item.windspeed, "级"),
                    windDirection: replaceStr(item.winddirection),
                    waveHeight: replaceStr(item.waveheight, "米"),
                    waveDirection: replaceStr(item.wavedirection),
                })
            })
            // console.log(forecastData.value);
            // console.log(Object.values(forecastData.value)[0]);

            let commonData = Object.values(forecastData.value)[0]
            // return
            let arr = [24, 48, 72]
            arr.forEach((item, index) => {
                let date = getForecastDate(item,startTime)
                renderData.value[1][index + 2].value = date
                renderData.value[2][index + 2].value = commonData[index].wheather
                renderData.value[3][index + 2].value = commonData[index].fog
            })
            Object.values(forecastData.value).forEach(item => {
                renderData.value.push(
                    [
                        {
                            value: item[0].seaAreaName,
                            header: true,
                            isShow: true,
                        },
                        {
                            value: '风速',
                            header: true,
                            isShow: true,
                        },
                        {
                            value: item.find(v => v.hour == 24)?.windSpeed,
                            header: false,
                            isShow: true,
                        },
                        {
                            value: item.find(v => v.hour == 48)?.windSpeed,
                            header: false,
                            isShow: true,
                        },
                        {
                            value: item.find(v => v.hour == 72)?.windSpeed,
                            header: false,
                            isShow: true,
                        },
                    ],
                    [
                        {
                            value: '秦一厂',
                            header: true,
                            isShow: false,
                        },
                        {
                            value: '风向',
                            header: true,
                            isShow: true,
                        },
                        {
                            value: item.find(v => v.hour == 24)?.windDirection,
                            header: false,
                            isShow: true,
                        },
                        {
                            value: item.find(v => v.hour == 48)?.windDirection,
                            header: false,
                            isShow: true,
                        },
                        {
                            value: item.find(v => v.hour == 72)?.windDirection,
                            header: false,
                            isShow: true,
                        },
                    ],
                    [
                        {
                            value: '秦一厂',
                            header: true,
                            isShow: false,
                        },
                        {
                            value: '浪高',
                            header: true,
                            isShow: true,
                        },
                        {
                            value: item.find(v => v.hour == 24)?.waveHeight,
                            header: false,
                            isShow: true,
                        },
                        {
                            value: item.find(v => v.hour == 48)?.waveHeight,
                            header: false,
                            isShow: true,
                        },
                        {
                            value: item.find(v => v.hour == 72)?.waveHeight,
                            header: false,
                            isShow: true,
                        },
                    ],
                    [
                        {
                            value: '秦一厂',
                            header: true,
                            isShow: false,
                        },
                        {
                            value: '浪向',
                            header: true,
                            isShow: true,
                        },
                        {
                            value: item.find(v => v.hour == 24)?.waveDirection,
                            header: false,
                            isShow: true,
                        },
                        {
                            value: item.find(v => v.hour == 48)?.waveDirection,
                            header: false,
                            isShow: true,
                        },
                        {
                            value: item.find(v => v.hour == 72)?.waveDirection,
                            header: false,
                            isShow: true,
                        },
                    ],
                )
            })
        }

    })
})

const renderData = ref([
    [
        {
            value: '时效',
            header: true,
            isShow: true,
        },
        {
            value: '时效',
            header: true,
            isShow: false,
        },
        {
            value: '24小时',
            header: true,
            isShow: true,
        },
        {
            value: '48小时',
            header: true,
            isShow: true,
        },
        {
            value: '72小时',
            header: true,
            isShow: true,
        },
    ],
    [
        {
            value: '日期',
            header: true,
            isShow: true,
        },
        {
            value: '日期',
            header: true,
            isShow: false,
        },
        {
            value: '',
            header: false,
            isShow: true,
        },
        {
            value: '',
            header: false,
            isShow: true,
        },
        {
            value: '',
            header: false,
            isShow: true,
        },
    ],
    [
        {
            value: '天气',
            header: true,
            isShow: true,
        },
        {
            value: '天气',
            header: true,
            isShow: false,
        },
        {
            value: '多云到阴',
            header: false,
            isShow: true,
        },
        {
            value: '多云到阴',
            header: false,
            isShow: true,
        },
        {
            value: '多云到阴局部有雨',
            header: false,
            isShow: true,
        },
    ],
    [
        {
            value: '雾况',
            header: true,
            isShow: true,
        },
        {
            value: '雾况',
            header: true,
            isShow: false,
        },
        {
            value: '无',
            header: false,
            isShow: true,
        },
        {
            value: '无',
            header: false,
            isShow: true,
        },
        {
            value: '无',
            header: false,
            isShow: true,
        },
    ],
])

const getForecastDate = (hour,startTime) => {
    // let startDate = addHours(new Date(), (hour - 24))
    // let endDate = addHours(new Date(), hour)
    let startDate = addHours(startTime, (hour - 24))
    let endDate = addHours(startTime, hour)
    
    let d1 = startDate.getDate()
    let d2 = endDate.getDate()
    if (d1 < 10) {
        d1 = '0' + d1
    }
    if (d2 < 10) {
        d2 = '0' + d2
    }
    return `${d1}日08时 - ${d2}日08时`
}

const getColspan = (td) => {
    if (td.value == '日期' || td.value == '天气' || td.value == '雾况' || td.value == '时效') {
        return 2

    } else {
        return 1
    }
}

const getRowspan = (td) => {

    if (td.value?.includes('号')) {
        return 4
    } else {
        return 1
    }
} 

const widthArr = ref([80, 100, 100, 100, 100])

</script>
<template>
    <div>
        <div class="popup" id="forecast_popup" ref="el" :style="style">
            <div class="sub-title">
                预报概况
                <img :src="iconClose" alt="" @click="activeMenu = ''">
            </div>

            <!-- renderData table -->
            <table>
                <tr v-for="(item, index) in renderData" :key="index">
                    <td v-for="(td, tdIndex) in item" :key="tdIndex" :class="!td.header ? 'table_th' : 'table_td'"
                        v-show="td.isShow" :colspan="getColspan(td)" :rowspan="getRowspan(td)"
                        :style="{ width: widthArr[tdIndex] + 'px' }">
                        <div v-html="td.value">
                        </div>
                    </td>
                </tr>
            </table>
            <div class="content">
                <div class="public-address">东海预报中心</div>
            </div>
        </div>
    </div>
</template>
<style scope lang="less">
#forecast_popup {
    position: fixed;
    top: 100px;
    right: 200px;
    z-index: 999;
    padding: 10px;

    table {
        overflow: hidden;
        border-collapse: collapse;
        width: 100%;
        table-layout: fixed;

        .table_th {
            text-align: center;
            font-size: 16px;
            height: 35px;
            color: #303133;
            border: 1px solid #DCDFE6;
            font-family: 'aliph400';
        }

        .table_td {
            background-color: #F5F7FA;
            height: 35px;
            text-align: center;
            font-size: 16px;
            padding: 0px 10px;
            border: 1px solid #DCDFE6;
            font-family: 'aliph400';
            letter-spacing: 1px;
        }
    }
}

.popup {
    width: 750px;
    height: auto;
    background-color: #f7fcff;
    border-radius: 25px;
    z-index: 99;
}

.sub-title {
    background-color: #e3f2ff88;
    border-radius: 10px;
    padding: 5px 10px;
    color: #3aa9ff;
    margin: 15px 10px 5px 10px;
    font-weight: bold;
    font-size: 20px;
    letter-spacing: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    img {
        width: 20px;
        height: 20px;
        cursor: pointer;
    }
}

.content {
    background-color: #e3f2ff00;
    border-radius: 10px;
    padding: 5px 10px;
}



.public-address {
    color: #bcbec0;
    font-size: 14px;
    font-weight: bold;

    text-align: right;
    width: 100%;
    margin: 5px 5px 5px 0;
}
</style>
